<script>
import detailPage from './components/detailPage.vue';
import { fetchHistoryDetail } from "@/api/table";

export default {
  components: {
    detailPage
  },
  mounted () {
    this.getHistoryDetail()
  },
  data () {
    return {
      resultData: {},
      isShowLoading: false
    }
  },
  methods: {
    async getHistoryDetail () {
      this.isShowLoading = false
      try {
        const res = await fetchHistoryDetail({
          id: this.$route.query.id
        })
        const resultData = res.data[0].resultData
        if(!resultData) return this.$message.error('计算结果不完整')
        this.resultData = (resultData && JSON.parse(resultData)) || {}
      } catch (e) {
        return console.log(e);
      } finally {
        this.isShowLoading = true
      }
    }
  }
}
</script>
<template>
  <div class="detail">
    <div class="bread">
      <span @click="$router.back(-1)"
        class="back">{{$t('page.ReturnList')}}</span> >
      {{$route.query.name}}（{{$route.query.time}}）
    </div>
    <detailPage 
      v-if="isShowLoading" 
      :computedData="resultData" 
      :isDeatailPage="true"
    ></detailPage>
  </div>
</template>
<style lang='scss' scoped>
.detail {
  .bread {
    margin: 20px 0 0 20px;
    .back {
      color: #028cdf;
      cursor: pointer;
    }
  }
}
</style>